<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <script>

            $(function(){
                $('div').click(function(){
                    //empty 清空子元素
                    $(this).empty();
                })

                //给按钮添加click时间，执行 remove
                $('#rm').click(function(){
                    //$('div').remove();
                    let $div = $('div');
                    $div.remove();
                    setTimeout(function(){
                        $('body').append($div)
                    },1500)
                })

                //detach 能够保留元素自身的事件监听
                $('#de').click(function(){
                    let $div = $('div');
                    $div.detach();
                    setTimeout(function(){
                        $('body').append($div)
                    },1500)
                })
            })

        </script>
        <style>
            div{
                background-color: #ffffff; 
                width: 200px;
                height: 100px;
                cursor: pointer;
                /* color: white; */
				border:solid 1px grey;
            }
        </style>
    </head>
    <body>
        <button id="rm">remove</button>
        <button id="de">detach</button>
		
        <div >
          asdfa  <span>block</span>
        </div>


    </body>
</html>
